<template>
    <div class="page-wrap">
        <div class="page-cont">
            <h-section title="审批意见" collapse>
                <div>
                    <a-form layout="inline" ref="ruleForm" :model="form">
                        <a-row :gutter="24">
                            <a-col :span="20">
                                <a-form-item label="审批意见">
                                    <span v-if="disabled">
                                        {{ form.auditOpinion }}
                                    </span>
                                    <a-textarea
                                        placeholder="请输入审批意见"
                                        showCount
                                        :maxlength="200"
                                        auto-size
                                        v-model:value="form.auditOpinion"
                                        v-else
                                    />
                                </a-form-item>
                            </a-col>
                            <a-col :span="8" v-if="detail.status === '3' && !disabled">
                                <a-form-item label="下个审批人">
                                    <h-search-select-cell
                                        :default-value="form.initiator"
                                        type="role"
                                        label="name"
                                        keyField="userId"
                                        :searchQuery="{ position: '领导' }"
                                        @success="handleSelectChange"
                                    />
                                </a-form-item>
                            </a-col>
                        </a-row>
                    </a-form>
                    <flexbox justify="flex-end" class="btn-group" v-if="!disabled">
                        <a-button @click="handleSave('保存')" v-if="detail.status === '2'">保存</a-button>
                        <a-button @click="handleSave('驳回')" v-else>驳回</a-button>
                        <a-button @click="handleSave('通过')">审批通过</a-button>
                        <a-button type="primary" @click="handleSave('拒绝')">拒绝变更</a-button>
                    </flexbox>
                </div>
            </h-section>
        </div>
    </div>
</template>

<script lang="ts">
import HSearchSelectCell from '@/components/HSearchSelect/HSearchSelectCell.vue';
import { defineComponent, ref, unref } from 'vue';
interface FormState {
    auditOpinion: Nullable<string>; // 审批意见
    pass: Nullable<string>;
    nextAuditUser: Nullable<string>;
    nextAuditUserName: Nullable<string>;
}
export default defineComponent({
    name: 'CreateProduct',
    components: {
        HSearchSelectCell
    },
    props: {
        detail: { type: Object, default: () => ({}) },
        disabled: { type: Boolean, default: false }
    },
    emits: ['save'],
    setup(props, { emit }) {
        const form = ref<FormState>({
            auditOpinion: '',
            pass: '',
            nextAuditUser: '',
            nextAuditUserName: ''
        });
        const validate = () => {
            return Promise.resolve(true);
        };
        const handleSave = (pass: string) => {
            form.value.pass = pass;
            emit('save', pass === '保存' ? 1 : 2);
        };
        const resetForm = () => {
            form.value = {
                auditOpinion: '',
                pass: '',
                nextAuditUser: '',
                nextAuditUserName: ''
            };
        };
        // 通用选择回调
        const handleSelectChange = (val) => {
            const { userId, name } = val;
            form.value = {
                ...unref(form),
                nextAuditUser: userId,
                nextAuditUserName: name
            };
        };
        const init = () => {
            resetForm();
            // 审核节点需要将意见置空
            if (props.detail.status === '2' || props.disabled) {
                form.value.auditOpinion = props.detail.auditOpinion;
            }
        };
        init();
        return {
            form,
            validate,
            handleSave,
            handleSelectChange
        };
    }
});
</script>
<style scoped lang="less">
.page-wrap {
    height: 100%;
    position: relative;
    .page-cont {
        background: #fff;
        .btn-group {
            margin-top: 24px;
            .ant-btn + .ant-btn {
                margin-left: 8px;
            }
        }
    }
}
</style>